<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>OpenApi</title>
		<!--<link href="../../../../Public/css/bootstrap-theme.css" rel="stylesheet" />
		<link href="../../../../Public/css/bootstrap.min.css" rel="stylesheet" />-->
		<link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet" />
		<link href="__PUBLIC__/css/bootstrap-theme.min.css" rel="stylesheet" />
		<style>
			html {
				-ms-text-size-adjust: 100%;
				-webkit-text-size-adjust: 100%;
			}
			
			body {
				font-family: 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti;
				margin: 0;
			}
			
			.main-nav {
				margin-left: 1px;
			}
			
			.main-nav.nav-tabs.nav-stacked> li {}
			
			.main-nav.nav-tabs.nav-stacked> li> a {
				padding: 10px 8px;
				font-size: 12px;
				font-weight: 600;
				color: #4A515B;
				background: #E9E9E9;
				background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FAFAFA), color-stop(100%, #E9E9E9));
				background: -webkit-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
				background: -o-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
				background: -ms-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
				background: linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
				filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
				border: 1px solid #D5D5D5;
				border-radius: 4px;
			}
			
			.main-nav.nav-tabs.nav-stacked> li> a> span {
				color: #4A515B;
			}
			
			.main-nav.nav-tabs.nav-stacked> li.active> a,
			#main-nav.nav-tabs.nav-stacked> li> a:hover {
				color: #FFF;
				background: #3C4049;
				background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4A515B), color-stop(100%, #3C4049));
				background: -webkit-linear-gradient(top, #4A515B 0%, #3C4049 100%);
				background: -o-linear-gradient(top, #4A515B 0%, #3C4049 100%);
				background: -ms-linear-gradient(top, #4A515B 0%, #3C4049 100%);
				background: linear-gradient(top, #4A515B 0%, #3C4049 100%);
				filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
				border-color: #2B2E33;
			}
			
			#main-nav.nav-tabs.nav-stacked> li.active> a,
			#main-nav.nav-tabs.nav-stacked> li> a:hover> span {
				color: #FFF;
			}
			
			.main-nav.nav-tabs.nav-stacked> li {
				margin-bottom: 4px;
			}
			
			.nav-header.collapsed> span.glyphicon-chevron-toggle:before {
				content: "\e114";
			}
			
			.nav-header> span.glyphicon-chevron-toggle:before {
				content: "\e113";
			}
			
			footer.duomi-page-footer {
				background-color: white;
			}
			
			footer.duomi-page-footer .beta-message {
				color: #a4a4a4;
			}
			
			footer.duomi-page-footer .beta-message a {
				color: #53a2e4;
			}
			
			footer.duomi-page-footer .list-inline a,
			footer.authenticated-footer .list-inline li {
				color: #a4a4a4;
				padding-bottom: 30px;
			}
			
			footer.duomi-page-footer {
				background-color: white;
			}
			
			footer.duomi-page-footer .beta-message {
				color: #a4a4a4;
			}
			
			footer.duomi-page-footer .beta-message a {
				color: #53a2e4;
			}
			
			footer.duomi-page-footer .list-inline a,
			footer.authenticated-footer .list-inline li {
				color: #a4a4a4;
				padding-bottom: 30px;
			}
			/*********************************************自定义部分*********************************************/
			
			.secondmenu a {
				font-size: 12px;
				color: #4A515B;
				text-align: center;
				border-radius: 4px;
			}
			
			.secondmenu> li> a:hover {
				background-color: #6f7782;
				border-color: #428bca;
				color: #fff;
			}
			
			.secondmenu li.active {
				background-color: #6f7782;
				border-color: #428bca;
				border-radius: 4px;
			}
			
			.secondmenu li.active> a {
				color: #ffffff;
			}
			
			.navbar-static-top {
				background-color: #212121;
				margin-bottom: 5px;
			}
			
			.navbar-brand {
				background: url('http://static-res.ruyo.net/ruyo_net_w_32.png') no-repeat 10px 8px;
				display: inline-block;
				vertical-align: middle;
				padding-left: 50px;
				color: #fff;
			}
			
			.navbar-brand:hover {
				color: #fff;
			}
			
			.collapse.glyphicon-chevron-toggle,
			.glyphicon-chevron-toggle:before {
				content: "\e113";
			}
			
			.collapsed.glyphicon-chevron-toggle:before {
				content: "\e114";
			}
		</style>
	</head>

	<body>
		<div class="navbar navbar-duomi navbar-static-top" role="navigation">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#" id="logo">欧拉网开发api
					</a>
				</div>
			</div>
		</div>
		<div class="container-fluid">
			<div class="row">
				<div class="col-md-2">
					<ul id="main-nav" class="main-nav nav nav-tabs nav-stacked " style="position: fixed;width: 250px;">
						<li>
							<a href="#">
								<i class="glyphicon glyphicon-th-large"></i> 首页
							</a>
						</li>
						<li>
							<a href="#userapi" class="nav-header collapsed" data-toggle="collapse">
								<i class="glyphicon glyphicon-cog"></i> 用户管理api

								<span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
							</a>
							<ul id="userapi" class="nav nav-list secondmenu collapse" style="height: 0px;">
								<!--<li>
									<a href="#register"><i class="glyphicon glyphicon-user"></i>&nbsp;注册</a>
								</li>-->
							</ul>
						</li>
					</ul>
				</div>
				<style>
					.small-title-api {
						font-weight: 100;
						font-size: 23px;
					}
					
					.api {
						line-height: 50px;
					}
					
					.content-api {
						font-size: 17px;
					}
					
					.table-title-api {
						background: rgb(0, 136, 204);
						color: white;
					}
					
					.return-api {
						font-size: 17px;
					}
				</style>
				<div id="api-content" class="col-md-10">
					<!--<section id="register" class="api" style="width: 80%;margin: 0px auto;">
						<h1 style="text-align: center;">用户注册</h1>
						<span class="small-title-api">简要说明:</span>
						<ul class="content-api">
							<li>用户注册</li>
						</ul>
						<span class="small-title-api">请求URL:</span>
						<ul class="content-api">
							<li>http://xx.com/api/user/register</li>
						</ul>
						<span class="small-title-api">请求方式:</span>
						<ul class="content-api">
							<li>POST</li>
						</ul>
						<span class="small-title-api">参数:</span>
						<table class="table table-bordered">
							<thead class="table-title-api">
								<tr>
									<th>参数名称</th>
									<th>参数</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>Table cell</td>
									<td>Table cell</td>
								</tr>
								<tr>
									<td>Table cell</td>
									<td>Table cell</td>
								</tr>
							</tbody>
						</table>
						<span class="small-title-api">返回:</span>
						<br/>
						<code class="return-api">
							{
								"error_code": 0,
								"data": {
									"uid": "1",
									"username": "12154545",
									"name": "吴系挂",
									"groupid": 2,
									"reg_time": "1436864169",
									"last_login_time": "0",
								}
							}
						</code>
					</section>-->
				</div>
			</div>
		</div>
		<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	</body>
	<script>
//		var json_object = [{
//			"register": {
//				"title": "用户注册",
//				"url": "http://xx.com/api/user/register",
//				"method": "post",
//				"para": {
//					"username": "xxx",
//					"password": "xxx"
//				},
//				"return": {
//					"error_code": 0,
//					"data": {
//						"uid": "1",
//						"username": "12154545",
//						"name": "吴系挂",
//						"groupid": 2,
//						"reg_time": "1436864169",
//						"last_login_time": "0",
//					}
//				},
//				"description": "xxx"
//			}
//		}, {
//			"register1": {
//				"title": "用户注册",
//				"url": "http://xx.com/api/user/register",
//				"method": "post",
//				"para": {
//					"username1": "xxx",
//					"password": "xxx"
//				},
//				"return": {
//					"error_code": 0,
//					"data": {
//						"uid": "1",
//						"username": "12154545",
//						"name": "吴系挂",
//						"groupid": 2,
//						"reg_time": "1436864169",
//						"last_login_time": "0",
//					}
//				},
//				"description": "xxx"
//			}
//		}];
		$(function() {
		    var json_object = {$api};
			for(var key in json_object) {
				var node = json_object[key];
				
				for(var name in node)
					var list = '<li><a href="#'+name+'"><i class="glyphicon glyphicon-user"></i>&nbsp;' + node[name].title + '</a></li>'
					$("#userapi").append(list);
					var ret = JSON.stringify(node[name].return);
					var dom = '<section id="' + name + '" class="api" style="width: 80%;margin: 0px auto;"> \
						<h1 style="text-align: center;">' + name + '</h1> \
						<span class="small-title-api">简要说明:</span> \
						<ul class="content-api"> \
							<li>' + node[name].title + '</li> \
						</ul> \
						<span class="small-title-api">请求URL:</span> \
						<ul class="content-api"> \
							<li>' + node[name].url + '</li> \
						</ul> \
						<span class="small-title-api">请求方式:</span> \
						<ul class="content-api"> \
							<li>' + node[name].method + '</li> \
						</ul> \
						<span class="small-title-api">参数:</span> \
						<table class="table table-bordered"> \
							<thead class="table-title-api"> \
								<tr> \
								<th>参数名称</th> \
									<th>参数</th> \
								</tr> \
							</thead> \
							<tbody class="api-table"> \
							</tbody> \
						</table> \
						<span class="small-title-api">返回:</span> \
						<br/> \
						<code class="return-api"> \
							'+ret+' \
						</code> \
					</section>';
				$("#api-content").append(dom);
				for(var key in node[name]["para"]){
					var table1 = '<tr><td>'+key+'</td><td>'+node[name]["para"][key]+'</td></tr>';
					$($(".api-table").get($(".api-table").length-1)).append(table1);
				}
			}

		});
	</script>

</html>